<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        .el-page-header__content{
            color: white;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div id="app">
    <el-page-header style="background-color: #8321e5;
            color: white;line-height: 60px" @back="goBack" content="个人主页">
    </el-page-header>
    <el-card style="width: 600px;height: 700px;margin: 0 auto">
        <el-form label-width="80px">
            <el-form-item label="用户名">
                <el-input type="text" placeholder="请输入用户名" v-model="user.id"></el-input>
            </el-form-item>
            <el-form-item label="姓名">
                <el-input type="text" placeholder="请输入姓名" v-model="user.name"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <input type="radio" name="gender" value="m" id="r1">
                <label for="r1">男</label>
                <input type="radio" name="gender" checked value="w" id="r2">
                <label for="r2">女</label>
            </el-form-item>
            <el-form-item label="学号">
                <el-input type="text" placeholder="请输入学号"v-model="user.student_id"></el-input>
            </el-form-item>
            <el-form-item label="地址">
                <el-input type="text" placeholder="请输入地址" v-model="user.loc"></el-input>
            </el-form-item>
            <el-form-item label="电话">
                <el-input type="text" placeholder="请输入电话" v-model="user.phone"></el-input>
            </el-form-item>
            <center>
            <el-form-item >
                    <el-button style="position:relative;right:40px" type="success" round @click="insert()">确认修改</el-button>
            </el-form-item>
            </center>
        </el-form>
    </el-card>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
   let v = new Vue({
        el: '#app',
        data: function() {
            return {
            user:{
            id:"",name:"",student_id:"",loc:"",phone:"",
                }
            }
        },
       methods: {
           insert(){
               axios.post("/product/insert",v.p).then(function (response) {
                   location.href="/admin.html";
               })
           },
           goBack(){
               history.back();//返回上一页面
           },

       },
       created:function () {
           //发请求获取分类数据
           axios.get("/category/select").then(function (response) {
               v.categoryArr = response.data;
           })
       },
   })
</script>
</html>
